<template>
  <div>
    <el-card style="margin: 2vw;height: 86vh">
      <div class="down-card">
        <div>
          <div class="form-card">
            <el-form ref="personForm" :model="personForm" :rules="rules" label-width="80px">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="personForm.name" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="账号" prop="username">
                <el-input v-model="personForm.username" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="personForm.password" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio v-model="personForm.sex" :label="1">男</el-radio>
                <el-radio v-model="personForm.sex" :label="0">女</el-radio>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="personForm.phone" style="width: 200px"></el-input>
              </el-form-item>
              <!-- <el-form-item label="头像">
                <el-avatar :src="require('./test.jpg')"></el-avatar>
              </el-form-item> -->

              <el-form-item label="头像" prop="avatar">

                <el-upload class="avatar-uploader" action="common/upload" :show-file-list="false"
                  :on-success="handleSuccess" :before-upload="beforeUpload" :on-progress="uploadProcess"
                  :headers="headerObj">
                  <!--
                  <el-image style="width: 100px; height: 100px" :src="require('../../img' + personForm.avatar)"
                    fit="fill"></el-image> -->

                  <img v-if="personForm.avatar" :src="img" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>

                </el-upload>

              </el-form-item>
              <el-form-item label="技能" prop="skills">
                <el-select v-model="personForm.skills" multiple placeholder="请选择员工技能" :popper-append-to-body="false"
                  style="width:30vw">
                  <el-option v-for="item in personForm.skillOptions" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工作经历" prop="experience">
                <el-input type="textarea" v-model="personForm.experience"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="EditPerson()">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { pInfoApi, skillApi, editPersonApi, downLoadImgApi } from './apis.js'
export default {
  name: 'Staff',
  data() {
    return {
      input: '',
      img: '',
      projectNum: 40,
      storage: {
        data: [],
        storageSkills: [],
      },
      personForm: {
        name: '',
        avatar: '',
        sex: '',
        phone: '',
        password: '',
        skills: [],
        skillOptions: [],
        username: '',
        experience: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入正确的手机号码！', trigger: 'blur' }, {
          pattern: /^((1[3456789]\d{9}))$/,
          message: '请输入正确的手机号码!',
        }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        avatar: [{ required: true, message: '请上传图片', trigger: 'change' }],
        skills: [{ required: true, message: '请选择技能', trigger: 'blur' }],
        experience: [{ required: true, message: '请输入工作经历', trigger: 'blur' }],
      },
      headerObj: {
        Authorization: 'Bearer' + getToken()
      },
    }
  },
  mounted() {
    this.skill();
    this.pInfo();
    console.log(this.personForm.avatar)
  },
  methods: {
    handleSuccess(res) {
      console.log(res.msg);
      this.personForm.avatar = res.msg;

      downLoadImgApi({ name: this.personForm.avatar }).then(res => {
        // console.log(res);
        let blob = new Blob([res], { type: 'image/png' })
        this.img = window.URL.createObjectURL(blob);

      }).catch(err => {
        console.log(err)//代码错误、请求失败捕获
      })

      if (res) {
        // console.log(res);
      } else {

        console.log('error');

      }
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    uploadProcess() {

    },
    skill() {
      skillApi().then(res => {
        this.storage.storageSkills = res.data;
        res.data.forEach((item) => {
          this.personForm.skillOptions.push({ value: item.id, label: item.name });
        })
      })
    },
    pInfo() {
      pInfoApi().then(res => {
        console.log(res);
        this.storage.data = res.data;
        this.personForm.username = res.data.username;
        this.personForm.name = res.data.name;
        this.personForm.avatar = res.data.avatar;
        this.personForm.password = 123;
        this.personForm.experience = res.data.experience;
        this.personForm.phone = res.data.phone;
        this.personForm.sex = res.data.sex;
        res.data.skills.forEach((item) => {
          this.personForm.skills.push(item.id);
        });
      })
    },
    EditPerson() {
      this.storage.data.name = this.personForm.name;
      this.storage.data.phone = this.personForm.phone;
      this.storage.data.experience = this.personForm.experience;
      this.storage.data.username = this.personForm.username;
      this.storage.data.password = this.personForm.password;
      this.storage.data.avatar = this.personForm.avatar;
      this.storage.data.sex = this.personForm.sex;
      this.storage.data.skills = this.storage.storageSkills.filter((item) => {
        return this.personForm.skills.find(prop => {
          return prop === item.id
        })
      });
      this.personForm.skills = [];
      // console.log(this.storage.data);
      editPersonApi(this.storage.data).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }
        this.pInfo();
      });
    },
    Check(data) {
      return !data;
    },
  },
}

</script>

<style lang="scss" scoped>
.down-card {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10vh;

}

.form-card {
  display: flex;
  width: 90%;
  height: 90%;
  flex-direction: column;
  justify-content: space-between;
}

.main-card .form-card .line {
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag+.el-tag {
  margin-left: 10px;
}


.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid #8c939d;
}
</style>
